<template>
  <div>
    <div>
      <!-- 头部 -->
      <van-nav-bar title="标题" fixed>
        <template #left>
          <img src="@/assets/logo.png" alt="" width="60px" />
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#E5DDD7" />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <!-- 导航栏 -->
      <van-tabs v-model="channelId"  sticky animated offset-top="36px">
        <van-tab :title="obj.name"
          v-for="obj in userChannelList"
          :key="obj.id"
          :name="obj.id">
        <ArticleList :channelId="channelId"></ArticleList>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import ArticleList from '@/views/Home/ArticleList'
import { getUserChannelsAPI } from '@/api'
export default {
  name: 'Home',
  data () {
    return {
      channelId: 0,
      userChannelList: []
    }
  },
  methods: {
  },
  async created () {
    // 频道列表
    const res = await getUserChannelsAPI()
    this.userChannelList = res.data.data.channels
  },
  components: {
    ArticleList
  }
}
</script>

<style>
.main {
  margin-top: 46px;
}
</style>
